<template>
  <div>
    <el-row class="marT">
      <el-col :xs="24" :sm="24" :lg="24" ref="point">
        <v-charts
          headerTitle="评分趋势"
          type="line"
          :data="data"
          :settings="settings"
          :data-empty="empty"
          :loading="loading"></v-charts>
          <el-input
            type="textarea"                        
            placeholder="请输入分析/建议"
            v-model="comment.groupComment.score_trend_comments"
            style="padding: 10px">
        </el-input>
      </el-col>
    </el-row>

    <div class="marT pointTable bgColor">
      <div class="ibox-title pad">评分列表</div>
        <el-row style="padding: 20px">
            <el-col :xs="24" :sm="24" :lg="24">
                <el-table
                  :header-cell-style="{background:'#eef1f6'}"
                  v-loading="pointLoading"
                  :data="pointTable.slice((pointCurrent-1)*pointSize, pointCurrent*pointSize)"                            
                  style="width: 100%">
                    <el-table-column 
                      fixed
                      label="月度统计"
                      align="center"
                      prop="examine_month"
                      width="80">
                    </el-table-column>

                    <el-table-column
                      label="客户满意度管理-客户投诉"
                      align="center"                        
                      prop="customer_mark"
                      width="180">
                      
                      <el-table-column
                        label="流程覆盖率"
                        align="center"             
                        prop="complaint_flow_cover_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                      <el-table-column
                        label="流程符合度"
                        align="center"                          
                        prop="complaint_flow_conformity"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                      <el-table-column
                        label="客户投诉纠正预防措施关闭率"
                        align="center"                          
                        prop="complaint_rectify_closed_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                    </el-table-column>

                    <el-table-column
                      label="阶段点质量评审"
                      align="center"
                      prop="period_mark"
                      width="300">
                      <el-table-column
                        label="AB类项目流程覆盖率"
                        align="center"
                        prop="period_flow_cover_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="流程符合度"
                        align="center"
                        prop="period_flow_conformity"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="评审计划偏差率"
                        align="center"
                        prop="period_plan_deviation_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="评审一次通过率"
                        align="center"
                        prop="period_review_pass_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="评审发现问题关闭率"
                        align="center"
                        prop="period_issue_closed_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                    </el-table-column>

                    <el-table-column
                      v-if="!groupStatus"
                      label="bug处理"
                      align="center"
                      prop="bug_mark"
                      width="180">
                      <el-table-column
                        label="AB类项目流程覆盖率"
                        align="center"
                        prop="bug_flow_cover_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="流程符合度"
                        align="center"
                        prop="bug_flow_conformity"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        label="无效Bug比例"
                        align="center"
                        prop="invalid_bug_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                    </el-table-column>

                    <el-table-column width="120" v-else align="center" label="bug处理">
                      <el-table-column 
                        label="Bug处理流程符合度"
                        align="center"
                        :formatter="point"
                        prop="bug_flow_conformity_for_customer"
                        width="60">
                      </el-table-column>          

                      <el-table-column 
                        label="无效Bug比例"
                        align="center"
                        :formatter="point"
                        prop="bug_comments_for_customer"
                        width="60">
                      </el-table-column>
                    </el-table-column>

                    <el-table-column
                      label="发布流程"
                      align="center"
                      prop="release_mark"
                      width="120">
                      <el-table-column
                        label="流程覆盖率"
                        align="center"
                        prop="release_flow_cover_rate"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        v-if="!groupStatus"
                        label="流程符合度"
                        align="center"
                        prop="release_flow_conformity"
                        :formatter="point"
                        width="60">
                      </el-table-column>

                      <el-table-column
                        v-else
                        label="Release流程符合度"
                        align="center"
                        prop="release_flow_conformity_for_customer"
                        :formatter="point"
                        width="60">
                      </el-table-column>
                    </el-table-column>                      

                    <el-table-column width="540" align="center" label="加减分项">
                      <el-table-column key="change" align="center" label="项目人员替换率">
                        <el-table-column 
                          v-if="targetList.labor_replacement_ratio"                      
                          align="center" 
                          :label="operatorList[targetList.labor_replacement_ratio.operator]+targetList.labor_replacement_ratio.indicator+'%'"
                          :formatter="point"
                          prop="labor_replacement_ratio"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column key="complaint" label="客户投诉次数(次)" align="center">
                        <el-table-column 
                          v-if="targetList.complaint_count"
                          :label="operatorList[targetList.complaint_count.operator]+targetList.complaint_count.indicator+'次'"
                          align="center"
                          prop="complaint_count"
                          :formatter="point"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column key="reason" label="因评审原因导致客户投诉次数(次)" align="center">
                        <el-table-column 
                          v-if="targetList.period_by_complaint_count"             
                          :label="operatorList[targetList.period_by_complaint_count.operator]+targetList.period_by_complaint_count.indicator+'次' || ''"
                          align="center"
                          :formatter="point"                           
                          prop="period_by_complaint_count"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="Bug comments填写规范度" align="center">
                        <el-table-column 
                          v-if="targetList.bug_comments"
                          :label="operatorList[targetList.bug_comments.operator]+targetList.bug_comments.indicator+'%'"
                          align="center"
                          :formatter="point"
                          prop="bug_comments"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="Bug超期率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_overtime_rate"
                          :label="operatorList[targetList.bug_overtime_rate.operator]+targetList.bug_overtime_rate.indicator+'%'"
                          align="center"
                          :formatter="point"
                          prop="bug_overtime_rate"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="bug degrade率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_degrade_rate"
                          :label="operatorList[targetList.bug_degrade_rate.operator]+targetList.bug_degrade_rate.indicator+'%'"
                          align="center"
                          prop="bug_degrade_rate"
                          :formatter="point"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="bug reopen率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_reopen_rate"
                          :label="operatorList[targetList.bug_reopen_rate.operator]+targetList.bug_reopen_rate.indicator+'%'"
                          align="center"
                          prop="bug_reopen_rate"
                          :formatter="point"
                          width="60">
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="bug逃逸率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_escape_rate"
                          :label="operatorList[targetList.bug_escape_rate.operator]+targetList.bug_escape_rate.indicator+'%'"
                          align="center"
                          prop="bug_escape_rate"
                          :formatter="point"
                          width="60">
                        </el-table-column>
                      </el-table-column>           

                      <el-table-column label="无效版本比例" align="center">
                        <el-table-column
                          v-if="targetList.invalid_version_rate" 
                          :label="operatorList[targetList.invalid_version_rate.operator]+targetList.invalid_version_rate.indicator+'%'"
                          align="center"
                          prop="invalid_version_rate"
                          :formatter="point"
                          width="60">
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column
                      align="center" 
                      label="基础流程得分"
                      :formatter="point"
                      prop="basic_flow_score">
                    </el-table-column>
                    <el-table-column
                      align="center" 
                      label="持续改进积分达标"
                      :formatter="point"
                      prop="improve_score"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      align="center" 
                      label="总分"
                      :formatter="point"
                      prop="total_mark"
                      width="80">
                    </el-table-column>
                </el-table>
                <el-pagination class="marT"
                  v-show="pointTotal > 10"
                  :page-size="pointSize"
                  background                              
                  @size-change="pointSizeChange"
                  @current-change="pointCurrentChange"
                  :current-page="pointCurrent"                               
                  layout="prev, pager, next"
                  style="text-align: center"
                  :total="pointTotal">
                </el-pagination>
            </el-col>
        </el-row>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.groupComment.score_table_comments"
          style="padding: 10px">
      </el-input>
    </div>
  </div>
</template>

<script>
  import VCharts from '@/components/charts/index'
  import http from '@/views/sys/axios'
  import { mapState } from 'vuex'

  export default {
    name: 'groupPointTrend',
    inject: ['comment'],
    components: {
      VCharts
    },
    props: {
      pointData: {
        type: Array,
        default: () => {
          return []
        }
      },
      targetList: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      ...mapState({
        chooseList: state => state.chooseList
      }),
      groupStatus() {
        if (this.chooseList.groupId === 261 || this.chooseList.groupId === 263) {
          return true
        } else {
          return false
        }
      }
    },
    data() {
      return {
        loading: false,
        pointLoading: false,
        empty: false,
        operatorList: ['>', '<', '>=', "<=", '='],
        data: {
          columns: ['examine_month', 'total_mark'],
          rows: []
        },
        pointTable: [],
        pointCurrent: 1,
        pointSize: 10,
        pointTotal: 0,
        settings: {
          labelMap: {
            total_mark: 'KPI评分(分)'
          }
        }
      }
    },
    created() {
      this.pointLoading = true
    },
    methods: {
      pointCurrentChange(val) {
        this.pointCurrent = val
      },
      pointSizeChange(val) {
        this.pointSize = val
      },
      point(row, column, cellValue, index) {
        if(cellValue != undefined) {
          return `${cellValue}分`
        } else {
          return '—'
        }
      }
    },
    watch: {
      pointData: {
        handler: function() {
          if(this.pointData.length) {
            this.data.rows = this.pointData
            this.pointTable = this.pointData
            this.pointTotal = this.pointTable.length
            this.empty = false
            this.pointLoading = false
          } else {
            this.empty = true
            this.data.rows = []
            this.pointTable = []
            this.pointLoading = false
          }
        },
        deep: true,
        immediate: true
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/common/common.scss';
  .bgColor{
    background: #fff;
  }
  .marT{
    margin-top: 20px;
  }
  .pad{
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;       
  }
</style>